<script setup>
import { deleteTableRow } from '../../../../utils/utils';
import { Check, Close } from '@element-plus/icons-vue'
import { useItem } from '../../../../store/index.js' //从pinia导入数据
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia'

const { item } = storeToRefs(useItem())
const useItemer = useItem()
const props = defineProps({
    volumeMounts: {
        type: Array
    }
})
// 定义添加volumeMounts的方法
const addVolumeMount = ()=>{
  if (useItemer.item.spec.template.spec.volumes.length == 0 ){
    ElMessage.warning('请先创建volumes卷')
    return
  }
    const volumeMount = {
        name: '',
        mountPath: '',
        subPath: '',
        readOnly: false
    }
    if (props.volumeMounts == null || props.volumeMounts == undefined) {props.volumeMounts = []}
    props.volumeMounts.unshift(volumeMount)
}

</script>

<template>
  <el-table
  border
  align="center"
  :data="props.volumeMounts"
  height="300px"
  >
    <el-table-column prop="name" label="选择volume" width="240">
        <template #default="scope">
            <el-form-item label-width="0" style="margin-bottom: 0px;" required>
                <el-select v-model="scope.row.name" placeholder="请选择volume卷">
                  <el-option
                  v-for="volume in item.spec.template.spec.volumes"
                  :key="volume.name"
                  :label="volume.name"
                  :value="volume.name"
                  >
                  </el-option>
                </el-select>
            </el-form-item>
        </template>
    </el-table-column>
    <el-table-column prop="mountPath" label="挂载路径" width="240">
        <template #default="scope">
            <el-form-item label-width="0" style="margin-bottom: 0px;">
                <el-input v-model.trim="scope.row.mountPath" placeholder="请输入挂载路径"/>
            </el-form-item>
        </template>
    </el-table-column>
    <el-table-column prop="subPath" label="挂载子路径" width="240">
        <template #default="scope">
            <el-form-item label-width="0" style="margin-bottom: 0px;">
                <el-input v-model.trim="scope.row.subPath" placeholder="可选 子路径"/>
            </el-form-item>
        </template>
    </el-table-column>
    <el-table-column prop="readOnly" label="只读挂载" width="100">
        <template #default="scope">
            <el-form-item label-width="0" style="margin-bottom: 0px;">
               <el-switch v-model="scope.row.readOnly" :active-icon="Check" :inactive-icon="Close" inline-prompt style="margin: 0px auto;">
               </el-switch>
            </el-form-item>
        </template>
    </el-table-column>
    <el-table-column prop="" label="添加" width="100">
        <template #header>
            <el-button link type="primary" @click="addVolumeMount()">
                添加
            </el-button>
        </template>
        <template #default="scope">
            <el-button link type="warning" @click="deleteTableRow(props.volumeMounts, scope.$index)">
                删除
            </el-button>
        </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>

</style>
